<template>
  <div>
    <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        @select="handleMenuSelect"
    >
      <el-menu-item index="userList">用户列表</el-menu-item>
      <el-menu-item index="addUser">添加用户</el-menu-item>
      <el-menu-item index="editUser">编辑用户</el-menu-item>
      <el-menu-item index="deleteUser">删除用户</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: 'userList' // 默认选中用户列表菜单项
    };
  },
  methods: {
    handleMenuSelect(index) {
      // 处理菜单项选中事件
      this.activeMenu = index;
      // 根据选中的菜单项跳转到对应的页面或执行相应的操作
      switch (index) {
        case 'userList':
          this.$router.push('/list_user');
          break;
        case 'addUser':
          this.$router.push('/add_user');
          break;
        case 'editUser':
          this.$router.push('/edit_user');
          break;
        case 'deleteUser':
          this.$router.push('/delete_user');
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style scoped>
/* 自定义样式可以在此处添加 */
.el-menu-vertical-demo {
  width: 200px;
}
</style>
